import 'package:flutter/material.dart';
import 'package:wechat_clone/constants.dart'
    show AppColors, AppStyle, Constants;
import 'package:wechat_clone/modal/conversation.dart';

class _ConversationItem extends StatelessWidget {
  const _ConversationItem({Key key, this.conversation})
      : assert(conversation != null),
        super(key: key);
  final Conversation conversation;


  Widget avatarItem() {
    return conversation.avatar.startsWith('http')
          ? Image.network(
              conversation.avatar,
              width: Constants.ConversationAvatarSize,
            )
          : Image.asset(
              conversation.avatar,
              width: Constants.ConversationAvatarSize,
            );
  }
  Widget unreadMsgCountText(){
    return Container(

    );
  }
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
          color: Color(conversation.stick
              ? AppColors.CoversationItemBGStick
              : AppColors.CoversationItemBGNormal),
          border: Border(
              bottom: BorderSide(
                  color: Color(AppColors.DividerColor),
                  width: Constants.DividerWidth,
                  style: BorderStyle.solid))),
      padding: const EdgeInsets.all(10.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Stack(
            // alignment: AlignmentDirectional(1, -1),
            overflow: Overflow.visible,
            children: <Widget>[
              avatarItem(),
              conversation.displayDot
              ? Positioned(
                  right: -5.0,
                  top: -5.0,
                  child: Container(
                      alignment: Alignment.center,
                      width: Constants.UnredMsgNotifyDotSize,
                      height: Constants.UnredMsgNotifyDotSize,
                      // padding: const EdgeInsets.all(5.0),
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.all(Radius.circular(5.0)),
                        // border: Border.all( width: 0.5, color: Colors.grey, style: BorderStyle.solid),
                        color: Colors.red,
                      )
                    )
                  )
              : (
                conversation.unreadMsgCount > 0 
                ? Positioned(
                    right: -5.0,
                    top: -5.0,
                    child: Container(
                      alignment: Alignment.center,
                      width: Constants.UnredMsgNotifyDotSize,
                      height: Constants.UnredMsgNotifyDotSize,
                      child: Text('${conversation.unreadMsgCount}', style: TextStyle(fontSize: 10.0, color: Colors.white),),
                      // padding: const EdgeInsets.all(5.0),
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.all(Radius.circular(10.0)),
                        // border: Border.all( width: 0.5, color: Colors.grey, style: BorderStyle.solid),
                        color: Colors.red,
                      ),
                    )
                  )
              : Text('')
              ),
 
              // Positioned(
              //   right: -7.0,
              //   top: -7.0,
              //   child: Container(
              //     child: Text('1000', style: TextStyle( fontSize: 10.0, color: Colors.white),),
              //     padding: const EdgeInsets.all(5.0),
              //     decoration: BoxDecoration(
              //       borderRadius: BorderRadius.all(Radius.circular(10.0)),
              //       // border: Border.all( width: 0.5, color: Colors.grey, style: BorderStyle.solid),
              //       color: Colors.red,
              //     ),
              //   ),
              // ),
            ],
          ),
          Container(
            width: 10.0,
          ),
          Expanded(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(
                  conversation.title,
                  style: AppStyle.TitleStyle,
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                ),
                Container(
                  height: 5.0,
                ),
                Text(
                  conversation.des,
                  style: AppStyle.DesStyle,
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                ),
              ],
            ),
          ),
          Container(
            width: 10.0,
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.end,
            children: <Widget>[
              Text(
                conversation.updateAt,
                style: AppStyle.DesStyle,
              ),
              Container(
                height: 5.0,
              ),
              conversation.isMute
                  ? Image.asset(
                      'assets/images/ic_quite.png',
                      width: 20.0,
                    )
                  : Text(''),
            ],
          )
        ],
      ),
    );
  }
}

class _DeviceInfoItem extends StatelessWidget {
  final Device device;
  _DeviceInfoItem({
    this.device : Device.WIN
  }) : assert(device != null);

  String get deviceContent{
    return device == Device.MAC ? "MAC" : "Windows";
  }
  int get iconData{
    return device == Device.MAC ? 0xe640 : 0xe75e;
  }
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(12.0),
      decoration: BoxDecoration(
        color: Color(AppColors.CoversationItemBGNormal),
        border: Border(
          bottom: BorderSide(
            color: Color(AppColors.DividerColor),
            width: Constants.DividerWidth,
            style: BorderStyle.solid
          )
        )
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          SizedBox(
             width: 10.0,
           ),
           Icon(IconData(
             iconData,
             fontFamily: Constants.IconFontFamily             
           )),
           SizedBox(
             width: 20.0,
           ),
           Text('$deviceContent 微信已登录，手机通知已关闭。', style: AppStyle.DeviceInfoText,),
        ],
      )
    );
  }
}

class ConversationPage extends StatefulWidget {
  @override
  _ConversationPageState createState() => _ConversationPageState();
}

class _ConversationPageState extends State<ConversationPage> {
  final ConversationPageData data = ConversationPageData.mock();

  @override
  Widget build(BuildContext context) {
    
    return Container(
      child: ListView.builder(
        itemBuilder: (BuildContext context, int index) {
          if(data.device == null){
            return _ConversationItem(
                conversation: data.conversations[index],
              );
          }else{
            if(index == 0){
              return _DeviceInfoItem(device: data.device,);
            }else{
              return _ConversationItem(
                conversation: data.conversations[index - 1],
              );
            }
          }
        },
        itemCount: data.device != null ? mockConversations.length + 1 : mockConversations.length,
      ),
    );
  }
}
